आकार पहचान API (एपीआई): एक तस्वीर हज़ार शब्दों, चेहरों, और बारकोड के बराबर होती है

Shape Detection API, इमेज में चेहरों, बारकोड, और टेक्स्ट का पता लगाता है.

Thomas Steiner

आकार पता लगाने का एपीआई क्या है?

navigator.mediaDevices.getUserMedia जैसे एपीआई और Android के लिए Chrome के फ़ोटो पिकर की मदद से, डिवाइस के कैमरे से इमेज या लाइव वीडियो डेटा कैप्चर करना या लोकल इमेज अपलोड करना काफ़ी आसान हो गया है. अब तक, इस डाइनैमिक इमेज डेटा के साथ-साथ, किसी पेज पर मौजूद स्टैटिक इमेज को कोड से ऐक्सेस नहीं किया जा सकता. हालांकि, इमेज में चेहरे, बारकोड, और टेक्स्ट जैसी कई दिलचस्प सुविधाएं हो सकती हैं.

उदाहरण के लिए, पहले अगर डेवलपर को क्यूआर कोड रीडर बनाने के लिए, क्लाइंट पर ऐसी सुविधाएं चाहिए थीं, तो उन्हें एक्सटर्नल JavaScript लाइब्रेरी पर निर्भर रहना पड़ता था. परफ़ॉर्मेंस के लिहाज़ से, यह महंगा हो सकता है और पेज का कुल वज़न बढ़ सकता है. दूसरी ओर, Android, iOS, और macOS जैसे ऑपरेटिंग सिस्टम के साथ-साथ कैमरा मॉड्यूल में मौजूद हार्डवेयर चिप में, आम तौर पर पहले से ही बेहतर और ज़्यादा ऑप्टिमाइज़ किए गए फ़ीचर डिटेक्टर मौजूद होते हैं. जैसे, Android FaceDetector या iOS का सामान्य फ़ीचर डिटेक्टर, CIDetector.

आकार पता लगाने वाला एपीआई, JavaScript इंटरफ़ेस के एक सेट के ज़रिए इन लागू तरीकों को दिखाता है. फ़िलहाल, FaceDetector इंटरफ़ेस की मदद से चेहरे का पता लगाने, BarcodeDetector इंटरफ़ेस की मदद से बारकोड का पता लगाने, और TextDetector इंटरफ़ेस की मदद से टेक्स्ट का पता लगाने (ऑप्टिकल कैरेक्टर रिकग्निशन, (ओसीआर)) की सुविधाएं काम करती हैं.

इस्तेमाल के सुझाए गए उदाहरण

जैसा कि ऊपर बताया गया है, फ़िलहाल Shape Detection API की मदद से, चेहरों, बारकोड, और टेक्स्ट का पता लगाया जा सकता है. नीचे दी गई बुलेट सूची में, इन तीनों सुविधाओं के इस्तेमाल के उदाहरण दिए गए हैं.

चेहरे की पहचान करने की सुविधा

  • ऑनलाइन सोशल नेटवर्किंग या फ़ोटो शेयर करने वाली साइटें, आम तौर पर अपने उपयोगकर्ताओं को इमेज में लोगों के बारे में जानकारी देने की अनुमति देती हैं. पहचाने गए चेहरों की सीमाओं को हाइलाइट करके, इस काम को आसान बनाया जा सकता है.
  • कॉन्टेंट साइटें, अन्य अनुमानित तरीकों के बजाय, संभावित तौर पर पहचाने गए चेहरों के आधार पर इमेज को डाइनैमिक तौर पर काट सकती हैं. इसके अलावा, वे स्टोरी जैसे फ़ॉर्मैट में कैन बर्न्स जैसे पैन और ज़ूम इफ़ेक्ट की मदद से, पहचाने गए चेहरों को हाइलाइट कर सकती हैं.
  • मल्टीमीडिया मैसेजिंग साइटें, अपने उपयोगकर्ताओं को चेहरे के पहचाने गए हिस्सों पर, चश्मा या मूंछें जैसे मज़ेदार ऑब्जेक्ट ओवरले करने की अनुमति दे सकती हैं.

बारकोड का पता लगाना

  • क्यूआर कोड पढ़ने वाले वेब ऐप्लिकेशन, ऑनलाइन पेमेंट या वेब नेविगेशन जैसे दिलचस्प इस्तेमाल के उदाहरणों को अनलॉक कर सकते हैं. इसके अलावा, वे मैसेंजर ऐप्लिकेशन पर सोशल कनेक्शन बनाने के लिए बारकोड का इस्तेमाल कर सकते हैं.
  • शॉपिंग ऐप्लिकेशन, अपने उपयोगकर्ताओं को किसी स्टोर में मौजूद आइटम के EAN या UPC बारकोड को स्कैन करने की अनुमति दे सकते हैं, ताकि वे ऑनलाइन कीमतों की तुलना कर सकें.
  • हवाई अड्डे पर वेब कीऑपरेटिंग सिस्टम वाले किऑस्क उपलब्ध कराए जा सकते हैं. यहां यात्री अपने बोर्डिंग पास के अज़टेक कोड को स्कैन करके, अपनी फ़्लाइट के बारे में अपनी पसंद के मुताबिक जानकारी देख सकते हैं.

टेक्स्ट की पहचान करने की सुविधा

  • ऑनलाइन सोशल नेटवर्किंग साइटें, उपयोगकर्ता से जनरेट हुए इमेज कॉन्टेंट को ऐक्सेस करने की सुविधा को बेहतर बना सकती हैं. इसके लिए, वे <img> टैग के लिए alt एट्रिब्यूट के तौर पर, पहचाने गए टेक्स्ट को जोड़ती हैं. ऐसा तब किया जाता है, जब कोई अन्य जानकारी उपलब्ध न हो.
  • कॉन्टेंट साइटें, टेक्स्ट का पता लगाने की सुविधा का इस्तेमाल करके, हेडलाइन को हेरो इमेज के ऊपर नहीं डालती हैं.
  • वेब ऐप्लिकेशन, टेक्स्ट का पता लगाने की सुविधा का इस्तेमाल करके, टेक्स्ट का अनुवाद कर सकते हैं. जैसे, रेस्टोरेंट के मेन्यू.

मौजूदा स्थिति

चरण स्थिति
1. एक्सप्लेनर वीडियो बनाना पूरा हो गया
2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाना पूरा हो गया
3. सुझाव/राय इकट्ठा करना और डिज़ाइन में बदलाव करना प्रोसेस जारी है
4. ऑरिजिन ट्रायल पूरा हो गया
5. लॉन्च करें बारकोड का पता लगाने की प्रोसेस पूरी हो गई
चेहरे की पहचान की जा रही है
टेक्स्ट की पहचान की जा रही है

आकार पता लगाने वाले एपीआई का इस्तेमाल करने का तरीका

को चालू करके, आकार की पहचान करने वाले एपीआई का इस्तेमाल कभी भी किया जा सकता है.

अगर आपको Shape Detection API को स्थानीय तौर पर आज़माना है, तो about://flags में #enable-experimental-web-platform-features फ़्लैग को चालू करें.

तीनों डिटेक्टर, FaceDetector, BarcodeDetector, और TextDetector के इंटरफ़ेस एक जैसे हैं. ये सभी एक एसिंक्रोनस तरीका उपलब्ध कराते हैं, जिसे detect() कहा जाता है. यह तरीका, इनपुट के तौर पर ImageBitmapSource लेता है. यह CanvasImageSource, Blob या ImageData में से कोई एक हो सकता है.

FaceDetector और BarcodeDetector के लिए, डिटेक्टर के कंस्ट्रक्टर में वैकल्पिक पैरामीटर पास किए जा सकते हैं. इससे, डिटेक्टर को अहम जानकारी दी जा सकती है.

अलग-अलग प्लैटफ़ॉर्म की खास जानकारी के लिए, कृपया एक्सप्लेनर में सहायता मैट्रिक को ध्यान से देखें.

BarcodeDetector के साथ काम करना

BarcodeDetector, ImageBitmapSource और बॉउंडिंग बॉक्स में मिलने वाली बारकोड की रॉ वैल्यू के साथ-साथ, ढूंढे गए बारकोड के फ़ॉर्मैट जैसी अन्य जानकारी भी दिखाता है.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

FaceDetector के साथ काम करना

FaceDetector हमेशा उन चेहरों के बॉउंडिंग बॉक्स दिखाता है जिन्हें ImageBitmapSource में पहचाना जाता है. प्लैटफ़ॉर्म के हिसाब से, आंखों, नाक या मुंह जैसे चेहरे के हिस्सों के बारे में ज़्यादा जानकारी उपलब्ध हो सकती है. ध्यान दें कि यह एपीआई सिर्फ़ चेहरों की पहचान करता है. यह किसी चेहरे की पहचान नहीं करता.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

TextDetector के साथ काम करना

TextDetector हमेशा, पहचाने गए टेक्स्ट के बॉउंडिंग बॉक्स दिखाता है. साथ ही, कुछ प्लैटफ़ॉर्म पर पहचाने गए वर्णों को भी दिखाता है.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

फ़ीचर का पता लगाना

सिर्फ़ कॉन्स्ट्रक्टर की मौजूदगी की जांच करके, आकार का पता लगाने वाले एपीआई की सुविधा का पता नहीं लगाया जा सकता. इंटरफ़ेस मौजूद होने से यह पता नहीं चलता कि उस प्लैटफ़ॉर्म पर यह सुविधा काम करती है या नहीं. इसका मतलब है कि यह उम्मीद के मुताबिक काम कर रहा है. इसलिए, हमारा सुझाव है कि आप डिफ़ेंसिव प्रोग्रामिंग का इस्तेमाल करें. इसके लिए, सुविधा का पता लगाने के लिए, इस तरह का तरीका अपनाएं:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

BarcodeDetector इंटरफ़ेस को अपडेट किया गया है, ताकि getSupportedFormats() तरीका शामिल किया जा सके. साथ ही, FaceDetector और TextDetector के लिए, मिलते-जुलते इंटरफ़ेस का सुझाव दिया गया है.

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

इससे आपको अपनी ज़रूरत के हिसाब से सुविधा का पता लगाने में मदद मिलती है. उदाहरण के लिए, क्यूआर कोड स्कैन करने की सुविधा:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

यह इंटरफ़ेस छिपाने से बेहतर है, क्योंकि अलग-अलग प्लैटफ़ॉर्म पर भी सुविधाएं अलग-अलग हो सकती हैं. इसलिए, डेवलपर को अपनी ज़रूरत के हिसाब से, सही सुविधा (जैसे, कोई खास बारकोड फ़ॉर्मैट या चेहरे की पहचान करने की सुविधा) चुनने के लिए बढ़ावा दिया जाना चाहिए.

ऑपरेटिंग सिस्टम से जुड़ी सहायता

बारकोड की पहचान करने की सुविधा, macOS, ChromeOS, और Android पर उपलब्ध है. Android डिवाइस पर Google Play services की ज़रूरत होती है.

सबसे सही तरीके

सभी डिटेक्टर, अलग-अलग समय पर काम करते हैं. इसका मतलब है कि वे मुख्य धागे को ब्लॉक नहीं करते. इसलिए, रीयल टाइम में गिरने का पता लगाने की सुविधा पर भरोसा न करें. इसके बजाय, डिटेक्टर को अपना काम करने के लिए कुछ समय दें.

अगर आप वेब वर्कर्स के प्रशंसक हैं, तो आपको यह जानकर खुशी होगी कि डिटेक्टर वहां भी एक्सपोज़ किए जाते हैं. पहचान के नतीजों को सीरियल किया जा सकता है. इसलिए, इन्हें postMessage() के ज़रिए वर्कर्स से मुख्य ऐप्लिकेशन में भेजा जा सकता है. डेमो में यह दिखाया गया है कि यह सुविधा कैसे काम करती है.

सभी प्लैटफ़ॉर्म पर सभी सुविधाएं काम नहीं करतीं. इसलिए, यह देख लें कि एपीआई के साथ कौनसी सुविधाएं काम करती हैं. साथ ही, एपीआई का इस्तेमाल बेहतर सुविधाओं के लिए करें. उदाहरण के लिए, हो सकता है कि कुछ प्लैटफ़ॉर्म पर चेहरे का पता लगाने की सुविधा काम करे, लेकिन चेहरे के हिस्सों (आंखें, नाक, मुंह वगैरह) का पता लगाने की सुविधा काम न करे. इसके अलावा, हो सकता है कि टेक्स्ट की मौजूदगी और जगह का पता लगाया जा सके, लेकिन टेक्स्ट के कॉन्टेंट का पता न लगाया जा सके.

सुझाव/राय दें या शिकायत करें

Chrome की टीम और वेब स्टैंडर्ड कम्यूनिटी, आकार का पता लगाने वाले एपीआई के साथ आपके अनुभवों के बारे में जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? क्या आपके पास अपने आइडिया को लागू करने के लिए, ऐसे तरीके या प्रॉपर्टी मौजूद नहीं हैं? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है?

  • Shape Detection API के GitHub डेटा स्टोर पर, स्पेसिफ़िकेशन से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव, राय या टिप्पणी जोड़ें.

क्या लागू करने में समस्या आ रही है?

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? या लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?

  • https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें और कॉम्पोनेंट को Blink>ImageCapture पर सेट करें. Glitch, रिप्रोडक्शन को तुरंत और आसानी से शेयर करने के लिए बहुत अच्छा है.

क्या आपको एपीआई का इस्तेमाल करना है?

क्या आपको अपनी साइट पर आकार की पहचान करने वाले एपीआई का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता पाने की सुविधा से, हमें सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे ब्राउज़र के अन्य वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

  • WICG के Discourse थ्रेड पर शेयर करें कि आपको इसका इस्तेमाल कैसे करना है.
  • #ShapeDetection हैशटैग का इस्तेमाल करके, @ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

काम के लिंक